<template>
  <div>
    <div v-show="isReadOnlyPage">
      <p v-show="isArr" v-for="(item, index) in value" :key="index">{{item && item.name}}</p>
      <p v-show="!isArr">{{strValue}}</p>
    </div>
    <a-select v-if="strType === 'selectType'" v-show="!isReadOnlyPage" :getPopupContainer="node => node.parentNode" :allowClear="keys !== 'workFlow' ? true : false" :value="selected" @change="handleChange" @select='handleSelect(keys)' :placeholder="'请选择'" :mode="selectorMode" :disabled="((keys === 'weChatPositionType' || keys === 'workFlow') && !isDisabled) ? stepAggsIsAbled : isDisabled" @blur="onBlurFn">
      <template v-if="mode === 'setFormVal'">
        <a-select-option v-for="(item) in values" :key="item.id + ''" :value="item.id" :disabled="item.isChecked">{{item.title}}</a-select-option>
      </template>
      <template v-if="mode === 'multiple'">
        <a-select-option v-for="(item) in values" :key="item.id + ''" :value="item.id" :disabled="item.isChecked">
          <a-tooltip placement="top" >
            <template slot='title'>
              {{item.name}}
            </template>
            {{item.name}}
          </a-tooltip>
        </a-select-option>
      </template>
      <template v-if="mode !== 'setFormVal' && mode !== 'multiple'">
        <a-select-option v-for="(item) in values" :key="item.id + ''" :value="item.id">{{item.name}}</a-select-option>
      </template>
    </a-select>
    <a-tree-select v-if="strType === 'treeType'" :disabled="isDisabled" v-model="selected" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="treeData" tree-default-expand-all @change="treeChange"></a-tree-select>
  </div>
</template>
<script>
export default {
  name: 'Select',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: ['value', 'values', 'isReadOnlyPage', 'mode', 'isDisabled', 'keys', 'stepAggsIsAbled', 'isResume'],
  computed: {
    selectorMode () {
      if (this.mode) {
        return this.mode
      }
      return 'default'
    },
    selected () {
      if (this.mode === 'multiple') {
        if (!this.value) {
          return []
        }
        return this.value.map(v => v.id)
      } else {
        return this.value && this.value.id ? this.value.id : this.value
      }
    },
    strValue () {
      if (!this.value) {
        return ''
      }
      let val = this.itemById(this.value.id)
      if (val) {
        return val.name ? val.name : val.title
      }
      return ''
    },
    isArr () {
      return Array.isArray(this.value)
    }
  },
  watch: {
    values: {
      handler (newVal) {
        let index = 0
        newVal.forEach(ele => {
          if (ele.children) {
            this.strType = 'treeType'
          } else {
            index++
          }
        })
        if (index === newVal.length) {
          this.strType = 'selectType'
        }
        if (this.strType === 'treeType') {
          this.treeData = resizeTree(newVal)
        }
      },
      immediate: true,
      deep: true
    }
  },
  data () {
    return {
      strType: '',
      treeData: []
    }
  },
  methods: {
    itemById (id) {
      return this.values.find(item => {
        if (item.id === id) {
          return true
        }
        return false
      })
    },
    handleChange (value) {
      console.log(value)
      if (this.isResume) {
        if (this.mode === 'multiple') {
          let val = []
          value.forEach(v => {
            val.push(v)
          })
          this.$emit('change', val)
        } else {
          let val = this.itemById(value)
          this.$emit('change', val.id)
        }
      } else {
        if (this.mode === 'multiple') {
          let val = []
          value.forEach(v => {
            val.push({ id: v, name: this.itemById(v).name })
          })
          this.$emit('change', val)
        } else {
          let val = this.itemById(value)
          this.$emit('change', val)
        }
      }
    },
    handleSelect (key) {
      this.$emit('ckeckedKeys', key)
    },
    onBlurFn () {
      this.$emit('onBlurFn', true)
    },
    treeChange (value, label, extra) {
      this.$emit('change', value)
    }
  }
}
function resizeTree (arr) {
  if (!Array.isArray(arr)) return
  return arr.map((item, index) => {
    return { title: item.name, value: item.id, key: item.id, children: resizeTree(item.children) }
  })
}
</script>
<style lang="stylus" scoped>
</style>
